<template>
    <el-table :data="tableData" style="width: 100%; margin-top: 30px;" :row-style="{ height: '100px'}">
        <el-table-column
            v-for="column in columns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
        />
    </el-table>
    <div style="margin-top: 30px; display: flex; justify-content: center;">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="sizePage"
            :page-sizes="pageSize"
            :size="size"
            :disabled="disabled"
            :background="background"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue';
import { ElMessage } from 'element-plus'; 
import request from "@/utils/request";

const currentPage = ref(1);
const sizePage = ref(5);
const total = ref();

const tableData = ref([])

const columns = ref([
    { prop: 'name', label: '用户名' },
    { prop: 'type', label: '房型'},
    { prop: 'bookingTime', label: '预定时间' },
    { prop: 'leavingTime', label: '离开时间' },
    { prop: 'telephone', label: '电话' },
    { prop: 'identity', label: '身份证号' }
]);

const findAllReservations = async() => {
    try {
        const res = await request.get('/reservation/findAll');
        console.log(res);
        if(res.code === '0') {
            total.value = res.data.length;
        }
    } catch(error) {
        ElMessage({
            message: error,
            type: 'error'
        });
    }
};

const findByPage = async(currentPage, sizePage) => {
    try {
        const res = await request.get('/reservation/findByPage', {
            params: {
                current: currentPage.value,
                size: sizePage.value
            }
        });
        console.log(res);
        if(res.code === '0') {
            tableData.value = res.data.records.map(item => ({
                name: item.user.name,
                type: item.room.type,
                bookingTime: item.bookingTime,
                leavingTime: item.leavingTime,
                telephone: item.user.telephone,
                identity: item.user.identity
            }));
        }
    } catch(error) {
        ElMessage({
            message: error,
            type: 'error'
        });
    }
}

onBeforeMount(async() => {
    findAllReservations();
    findByPage(currentPage, sizePage);
});

const handleCurrentChange = async(newPage) => {
    currentPage.value = newPage;
    await findByPage(currentPage, sizePage);
}

</script>

<style lang="less" scoped>

</style>